<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            width: 700px;

        }
        .top{
            padding: 10px;
            background-color: #5b9bb7;
            text-align: right;
        }
        span{
            display: inline-block;
            padding: 10px;
            background-color: #46859a;
        }
        span.active{
            background-color: #b74b8f;
        }
        span img{
            display: block;
            margin: 0 auto;
        }
        li{
            list-style: none;
        }
        li img{
            width: 100%;
        }
        .float .img{
            float: left;
            width: 300px;

        }
        .float .title{
            display: none;
        }
        .list .img{
            width: 100px;
            float: left;
        }
        .list .title{
            float: left;
        }
        li.list{
            border-bottom: 1px solid gray;
            overflow: hidden;
            padding: 10px 0;
        }
        li.list:last-child{
            border: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="top">
            <span id="left" @click="fn" :class="{active:has}"><img src="images/lefticon.png" alt=""></span>
            <span id="right" @click="fn2" :class="{active:!has}"><img src="images/righticon.png" alt=""></span>
        </div>
        <ul>
            <li v-for="(item,index) in arr" :class="{float:has,list:!has}">
                <div class="img">
                    <img :src="item.image.large" alt="">
                </div>
                <p class="title">{{item.title}}</p>
            </li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            arr:[
            {
                "title": "儿童社交的爱与痛（套装全2册）",
                "url": "http://product.dangdang.com/25189806.html",
                "image": {
                    "large": "http://img3m6.ddimg.cn/48/21/25189806-1_w_7.jpg",
                    "small": "http://img3m6.ddimg.cn/48/21/25189806-1_w_7.jpg"
                }
            },
            {
                "title": "刘墉口才大师经典套装(畅销30年超值珍藏版)",
                "url": "http://product.dangdang.com/23995236.html",
                "image": {
                    "large": "http://img3m6.ddimg.cn/12/33/23995236-1_w_6.jpg",
                    "small": "http://img3m6.ddimg.cn/12/33/23995236-1_w_6.jpg"
                }
            },
            {
                "title": "丹·布朗作品系列：本源",
                "url": "http://product.dangdang.com/25253662.html",
                "image": {
                    "large": "http://img3m2.ddimg.cn/49/15/25253662-1_w_3.jpg",
                    "small": "http://img3m2.ddimg.cn/49/15/25253662-1_l_3.jpg"
                }
            },
            {
                "title": "高兴死了!!!（我正在人生低谷，我现在高兴死了！）",
                "url": "http://product.dangdang.com/25245058.html",
                "image": {
                    "large": "http://img3m8.ddimg.cn/58/32/25245058-1_w_4.jpg",
                    "small": "http://img3m8.ddimg.cn/58/32/25245058-1_l_4.jpg"
                }
            },
            {
                "title": "谈判：如何在博弈中获得更多(第四版)Everything is Negotiable",
                "url": "http://product.dangdang.com/25247638.html",
                "image": {
                    "large": "http://img3m8.ddimg.cn/64/22/25247638-1_l_1.jpg",
                    "small": "http://img3m8.ddimg.cn/64/22/25247638-1_l_1.jpg"
                }
            },
            {
                "title": "好想去这样那样的国家（全6册）",
                "url": "http://product.dangdang.com/25261269.html",
                "image": {
                    "large": "http://img3m9.ddimg.cn/33/0/25261269-1_l_3.jpg",
                    "small": "http://img3m9.ddimg.cn/33/0/25261269-1_l_3.jpg"
                }
            }
            ],
            has:true
        },
        methods:{
            fn(){
                this.has = true
            },
            fn2(){
                this.has = false
            }
        }
    })
</script>
</html>